<script setup>
import { ref, reactive, getCurrentInstance, onMounted, watch, render } from "vue"
import { RefreshRight, CirclePlus } from '@element-plus/icons-vue'

const instance = getCurrentInstance()
const _this = instance.appContext.config.globalProperties //vue3获取当前this

// 组件中使用，接收传参的
let propsData = defineProps({
  searchForm: Object,
  algorithmSelect: {
    type: Array,
    default: []
  },
  locationSelect: {
    type: Array,
    default: []
  },
  stateSelect: {
    type: Array,
    default: []
  },
})
// 组件中使用，接收事件的
const emits = defineEmits(['search', 'add', 'refresh']);
</script>

<template>
  <el-form :inline="true" :model="searchForm" class="form_search_table">
    <el-form-item label="Algorithm">
      <el-select
        v-model="searchForm.algorithmType"
        placeholder="Please select"
        filterable
        clearable
      >
        <el-option v-for="item in algorithmSelect" :key="item.id" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="Location">
      <el-select
        v-model="searchForm.location"
        placeholder="Please select"
        filterable
        clearable
      >
        <el-option v-for="item in locationSelect" :key="item.id" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="State">
      <el-select
        v-model="searchForm.state"
        placeholder="All"
        filterable
        clearable
      >
        <el-option v-for="item in stateSelect" :key="item.id" :label="item.label" :value="item.value" />
      </el-select>
    </el-form-item>
    <el-form-item label="Search">
      <el-input v-model="searchForm.search" @keyup.enter.native="() => emits('search')" placeholder="Search For Name/Model…" clearable />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="() => emits('search')">Query</el-button>
      <div class="event_btn">
        <el-button type="primary" :icon="CirclePlus" @click="() => emits('add')">Add Camera</el-button>
        <el-button type="primary" :icon="RefreshRight" @click="() => emits('refresh')">Refresh</el-button>
      </div>
    </el-form-item>
  </el-form>
</template>